<template>
	<view>
		<u-sticky v-if="searchType!='search'">
			<view class="tabs">
				<u-tabs :list="tablist" @click="clickTab" lineWidth="30" lineColor="#f56c6c" keyName="name"
					:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}" :inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)'
				}" itemStyle="padding:0 40rpx; height: 34px;">
				</u-tabs>

				<view class="tabs-1">
					<view v-for="(item, index) in tablist1" :key="index" class="tabs-2"
						:class="{ 'active': isSelected === index }" @click="selectTab(index, item.id)">
						{{ item.name }}
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="to-btn" @click="goPage('publish')" v-if="searchType!='search'">
			<image src="https://pw.qyang.cc/static/btn_add.png"></image>
		</view>
		<view :class="searchType=='search'?'':'content'">
			<view class="dynamicList" v-for="(item, index) in dynamicList" :key="index" @click="goPage('detail', item)">
				<view class="left">
					<image :src="rq.imgUrl(item.user.avatar)" mode="scaleToFill" @click.stop="toHome(item.user.id)">
					</image>
				</view>
				<view class="right">
					<view class="r1">
						<view style="display:flex;align-items:center;width:0;flex:1;">
							<view class="name">{{ item.user.nickname }}</view>
							<image src="https://pw.qyang.cc/static/svg/icon-realname.svg"
								style="width: 30rpx;height: 30rpx;margin: 0 20rpx;" v-if="item.user.is_real === 1">
							</image>
							<view class="tuijian" v-if="item.recommend == 1">
								<i class="iconfont" style="font-size: 12px;margin-right: 4rpx;">&#xe6c8</i>小编推荐
							</view>
						</view>
						<view class="fenlei">
							<view class="fenlei1">
								{{ item.category.name }}
							</view>
						</view>
					</view>
					<view class="r2">
						<view class="r2-sex1" v-if="item.user.gender === 1">
							<image src="https://pw.qyang.cc/static/sexW.png"
								style="width: 20rpx;height: 20rpx;margin-right: 10rpx;">
							</image>{{ item.user.age ? item.user.age : '--' }}
						</view>
						<view class="r2-sex2" v-if="item.user.gender === 0">
							<image src="https://pw.qyang.cc/static/sexM.png"
								style="width: 20rpx;height: 20rpx; margin-right: 10rpx;">
							</image>{{ item.user.age ? item.user.age : '--' }}
						</view>
						<view class="r2-con">
							&nbsp;{{ item.user.cm ? item.user.cm : '--' }}cm&nbsp;
							{{ item.user.kg ? item.user.kg : '--' }}kg
						</view>
						<view class="r2-time">
							{{ item.createtime }}
						</view>
					</view>
					<view class="r3" v-if="item.user.tags && item.user.tags.length > 0">
						<view class="tabs">
							<view class="tabs-item" v-for="i, a in item.user.tags" :key="a"
								:style="{ background: i.color }">
								{{ i.name }}
							</view>
						</view>
					</view>
					<view class="r4">
						<span v-html="showContent(item.content)"></span>
						<view v-if="item.content.length > maxShowLength"
							style="display: flex;justify-content: space-between;">
							<view></view>
							<view class="expand-btn" @click.stop="toggleExpand(item, index)">
								{{ item.isExpanded ? '收起' : '展开' }}
							</view>
						</view>
					</view>
					<!-- #ifndef APP -->
					<view class="r5">
						<view class="image" v-for="i, ii in item.image" @tap.stop="previewMedia(item, ii)">
							<video :src="i" muted autoplay loop :controls="false" @tap.stop="previewMedia(item, ii)"
								v-if="i.includes('.mp4')"></video>
							<image :src="i" mode="aspectFill" v-else @tap.stop="previewMedia(item, ii)"></image>
						</view>
					</view>
					<!-- #endif -->
					<!-- #ifdef APP -->
					<view class="r5">
						<view class="image" v-for="i, ii in item.str" @tap.stop="previewMedia(item, ii)">
							<!-- <video :src="i" muted autoplay loop :controls="false" @tap.stop="previewMedia(item,ii)" v-if="i.includes('.mp4')"></video> -->
							<image v-if="i.type == 'video'" src="https://pw.qyang.cc/static/index_play.png"
								class="play_icon"></image>
							<image :src="i.url" mode="aspectFill" @tap.stop="previewMedia(item, ii)"></image>
						</view>
					</view>
					<!-- #endif -->

					<view :class="a.type === 0 ? 'r6' : 'r7'" v-for="a, b in item.activity" v-if="b < 2" :key="b"
						@click.stop="toActivity(a)">
						<image
							:src="a.type === 0 ? 'https://pw.qyang.cc/static/icon2.png' : 'https://pw.qyang.cc/static/svg/xin.svg'"
							mode="aspectFit">
						</image>
						{{ a.name }}
					</view>
					<view class="r10" v-if="item.activity && item.activity.length > 2">
						<u-icon name="arrow-down" size="12" color="#000000"></u-icon>
					</view>
					<view class="r9" v-if="item.location" @click.stop>
						<image src="https://pw.qyang.cc/static/svg/dingwei.svg" mode="aspectFit">
						</image>
						{{ item.location }}
					</view>
					<view class="r8" @click.stop>
						<view class="image" @click.stop="handleZan(item, index)">
							<image
								:src="item.is_upvote === 1 ? 'https://pw.qyang.cc/static/is_upvote.png' : 'https://pw.qyang.cc/static/black-xin.png'"
								mode="aspectFit"></image>
							{{ item.upvote_num }}
						</view>
						<!-- &nbsp;&nbsp; -->
						<view class="image" @click.stop="handleCang(item, index)">
							<image
								:src="item.is_collect === 1 ? 'https://pw.qyang.cc/static/is_collect.png' : 'https://pw.qyang.cc/static/black-shoucang.png'"
								mode="aspectFit"></image>
							{{ item.collect_num }}&nbsp;&nbsp;
						</view>
						<view class="image" @click.stop="goPage('detail', item)">
							<image src="https://pw.qyang.cc/static/black-pinglun.png" mode="aspectFit"></image>
							{{ item.comment_num }}
						</view>
						<!-- #ifndef H5 -->
						<button open-type="share" class="share" @click.stop="handleShare(item)">
							<image src="https://pw.qyang.cc/static/black-fenxiang.png" mode="aspectFit"></image>
						</button>
						<!-- #endif -->
						<image src="https://pw.qyang.cc/static/svg/black-3dian.svg" mode="aspectFit"
							@click.stop="handleMore(item)"></image>
					</view>
				</view>
			</view>

		</view>

		<!-- 展示更多——举报 -->
		<u-popup :show="showMore" :round="10" mode="bottom" @close="showMore = false" @open="showMore = true">
			<view class="pop-content">
				<view class="text" @click="manage" v-if="groupId == 3">
					管理
				</view>
				<!-- 管理 -->
				<u-popup :show="showManage" :round="10" mode="bottom" @close="showManage = false"
					@open="showManage = true">
					<view class="pop-content">
						<view class="title">
							管理
						</view>
						<view class="con">

							<view class="con1">
								<view class="con1-2" @click="selectStatus('1')">
									<image class="btn-img1" v-if="model.status == '1'"
										src="https://pw.qyang.cc/static/commit-success.png" mode="">
									</image>
									<image class="btn-img1" v-else src="https://pw.qyang.cc/static/selected-null.png"
										mode=""></image>
									正常
								</view>
								<view class="con1-2" @click="selectStatus('-1')">
									<image class="btn-img1" v-if="model.status == '-1'"
										src="https://pw.qyang.cc/static/commit-success.png" mode="">
									</image>
									<image class="btn-img1" v-else src="https://pw.qyang.cc/static/selected-null.png"
										mode=""></image>
									下架
								</view>
							</view>
							<view class="is_recommend">
								是否推荐
								<view>
									<u-switch space="2" @change="recomendChange" :value="model.recommend == 1"
										activeColor="#84E28D" inactiveColor="#F6F6F6">
									</u-switch>
								</view>
							</view>
							<view class="con2">
								推荐
								<u-input class="input" type="number" v-model="model.weigh" placeholder="请输入推荐值数值"
									border="none" inputAlign="right"></u-input>
							</view>
							<view class="con3">
								操作说明 <span class="con3-text">（说明文字将同步到用户）</span>
								<view class="con3-input">
									<u--textarea v-model="model.declare" placeholder="请输入"></u--textarea>
								</view>
							</view>
						</view>
						<view class="pop-bottom">
							<view class="btn1" @click="showManage = false">
								取消
							</view>
							<view class="btn2" @click="editStatus">
								确认
							</view>
						</view>
					</view>
				</u-popup>
				<view class="text" @click="goPage('report', currentItem)">
					举报
				</view>
				<view class="pop-bottom">
					<view class="btn" @click="showMore = false">
						取消
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 展示更多——自己的帖子 -->
		<u-popup :show="showMore1" :round="10" mode="bottom" @close="showMore1 = false" @open="showMore1 = true">
			<view class="pop-content">
				<view class="text" @click="edit">
					编辑
				</view>
				<view class="text" @click="del">
					删除
				</view>
				<view class="pop-bottom">
					<view class="btn" @click="showMore1 = false">
						取消
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showTip" mode="center" @close="showTip = false" @open="showTip = true" :closeable="true"
			round="10">
			<view class="pop-bg">
				提示
				<view class="text">
					确认删除此动态？
				</view>
				<view class="btn">
					<view class="confirm" @click="showTip = false">我再想想</view>
					<view class="cancel" @click="confirmTip">确认删除</view>
				</view>
			</view>
		</u-popup>
		<view class="bottom-tabbar" v-if="searchType!='search'">
			<tabbar :currentPage="1" />
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			searchContent: {
				type: String,
				default: ''
			},
			searchType: {
				type: String,
				default: ''
			},
			getSquare:{
				type:Number,
				default:0
			}
		},
		watch:{
			getSquare(n){
				console.log(n,'11111')
				this.getList()
			}
		},
		data() {
			return {
				isSelected: 0,
				value: '',
				maxShowLength: 50,
				showMore: false,
				showMore1: false,
				showManage: false,
				selectedStatus: '0',
				showTip: false,
				tablist: [],
				tablist1: [{
					id: 1,
					name: '最热',
				}, {
					id: 2,
					name: '最新',
				}, {
					id: 3,
					name: '关注'
				}],
				dynamicList: [],
				category_id: "",
				type_id: "1",
				page: 1,
				groupId: null,
				currentItem: {},
				model: {
					recommend: 0
				}
			}
		},
		onLoad() {
			//分类列表
			this.rq.getData('dynamic/category', {}).then(res => {
				if (res.code == 1) {
					res.data.unshift({
						id: 0,
						name: '全部'
					})
					this.tablist = res.data
					this.category_id = res.data[0].id
					this.clickTab(this.tablist[0])
				}
			})
		},
		onShow() {
			this.getList()
		},
		created() {
			if (this.searchType == 'search'){
				this.getList()
			}
		},
		onShareAppMessage() {
			return {
				title: '动态广场',
				path: '/pages/square/square',
			}
		},
		onShareTimeline() {
			return {
				title: '动态广场',
				path: '/pages/square/square',
			}
		},
		methods: {
			selectStatus(i) {
				this.model.status = i
			},
			toHome(id) {
				uni.navigateTo({
					url: '/subpages/talent/talent?id=' + id
				})
			},
			toActivity(item) {
				if (item.type === 0) {
					uni.navigateTo({
						url: '/subpages/activity/detail?id=' + item.id
					})
				}
			},
			manage() {
				this.rq.getData('agent/post_status_detail', {
					id: this.currentItem.id
				}).then(res => {
					this.model = res.data
				}).finally(() => {
					this.model.id = this.currentItem.id
					this.showManage = true
				})
			},
			handleZan(item, index) {
				this.rq.getData('collect/set_upvote', {
					id: item.id,
					class: 'upvote',
					type: 1
				}).then(res => {
					if (res.code === 1) {
						this.dynamicList[index].is_upvote = this.dynamicList[index].is_upvote == 1 ? 0 : 1
						this.dynamicList[index].upvote_num = this.dynamicList[index].is_upvote == 1 ? this
							.dynamicList[index].upvote_num + 1 : this.dynamicList[index].upvote_num - 1
					}
				})
			},
			handleCang(item, index) {
				this.rq.getData('collect/set_upvote', {
					id: item.id,
					class: 'collect',
					type: 1
				}).then(res => {
					if (res.code === 1) {
						this.dynamicList[index].is_collect = this.dynamicList[index].is_collect == 1 ? 0 : 1
						this.dynamicList[index].collect_num = this.dynamicList[index].is_collect == 1 ? this
							.dynamicList[index].collect_num + 1 : this.dynamicList[index].collect_num - 1
					}
				})
			},
			handleComment(item) {
				console.log('评论');
			},
			handleShare(item) {
				let _this = this
				//#ifdef APP
				uni.share({
				    provider: 'weixin',
				    scene: "WXSceneSession",
				    type: 5,
				    imageUrl:'https://pw.qyang.cc/static/basicprofile.png',
				    title: '动态广场',
				    miniProgram: {
				        id: 'gh_30c9bdca022b',
				        path: 'pages/square/square',
				        type: _this.rq.isTest?2:0,
				        webUrl: 'https://pw.qyang.cc'
				    },
				    success: ret => {
				        console.log(JSON.stringify(ret));
				    },
					fail: (err) => {
						console.log(JSON.stringify(err));
					}
				});
				//#endif
			},
			recomendChange(e) {
				this.model.recommend = e ? 1 : 0
			},
			editStatus() {
				this.rq.getData('agent/post_status', this.model).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '修改成功~',
							icon: 'none'
						})
						this.page = 1
						this.getList()
						this.showManage = false
					}
				})
			},
			handleMore(item) {
				let userInfo = uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')) : null
				this.currentItem = item
				this.groupId = userInfo.group_id
				// 是自己发布的帖子
				if (item.user.id == userInfo.id) {
					this.showMore1 = true
				} else {
					// 别人发布的——举报
					this.showMore = true
				}
			},
			edit() {
				uni.navigateTo({
					url: '/pages/square/publish?id=' + this.currentItem.id
				})
			},
			del() {
				this.showTip = true
			},
			confirmTip() {
				this.rq.getData('dynamic/delete', {
					id: this.currentItem.id
				}).then(res => {
					if (res.code === 1) {
						uni.showToast({
							title: '删除成功~',
							icon: 'none'
						})
						this.showTip = false
					}
				})
			},
			previewMedia(item, media) {
				uni.navigateTo({
					url: '/pages/square/picDetail?id=' + item.id + '&index=' + media
				})
			},
			selectTab(index, id) {
				this.isSelected = index;
				this.type_id = id
				this.getList()
			},
			showContent(content) {
				const currentItem = this.dynamicList.find(item => item.content === content);
				if (currentItem.isExpanded) {
					return content;
				}
				return content.slice(0, this.maxShowLength);
			},
			// 点击展开/收起按钮的处理方法
			toggleExpand(item, index) {
				this.dynamicList[index].isExpanded = !this.dynamicList[index].isExpanded;
			},
			initContentLines() {
				const defaultFields = {
					isExpanded: false
				};
				this.dynamicList = this.dynamicList.map(item => {
					// 使用Object.assign方式添加字段
					return Object.assign({}, item, {
						// contentLines: this.calculateContentLines(item.content),
						isExpanded: false
					});
				});
			},
			goPage(url, item) {
				if (item) {
					const id = item.id
					uni.navigateTo({
						url: `/pages/square/${url}?id=${id}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/square/${url}`
					})
				}
			},
			clickTab(e) {
				console.log(e)
				this.category_id = e.id
				this.getList()
			},
			async getList() {
				if (!uni.getStorageSync('dw') || !uni.getStorageSync('dw').id) {
					await getApp().getMyAddress(true);
				}
				let params = {}
				if (this.searchType == 'search') {
					params = {
						content: this.searchContent,
						city_id: uni.getStorageSync('dw').id,
						page: this.page
					}
				} else {
					params = {
						category_id: this.category_id,
						type: this.type_id,
						city_id: uni.getStorageSync('dw').id,
						page: this.page,
					}
				}
				this.rq.getData('dynamic/get_dynamic', params).then(res => {
					if (res.code == 1) {
						this.total = res.data.total
						if (this.page == 1) {
							this.dynamicList = res.data.data
						} else {
							this.dynamicList = this.dynamicList.concat(res.data.data)
						}
						
						if (this.searchType == 'search'){
							this.$emit('getList',this.dynamicList)
						}
					}
					this.initContentLines();
				})
			}
		},
		onReachBottom() {
			if (this.dynamicList.length < this.total) {
				this.page++
				this.getList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.is_recommend {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		margin: 40rpx 10rpx 0;

		&::v-deep .u-switch {
			width: 64rpx !important;
			height: 30rpx !important;
			border-radius: 10rpx !important;
		}

		&::v-deep .u-switch__node {
			width: 27.43rpx !important;
			height: 27rpx !important;
			border-radius: 8rpx !important;
			box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(157, 170, 149, 0.251);
			transform: translateX(0rpx) !important;
		}

		&::v-deep .u-switch__node.false {
			transform: translateX(-33rpx) !important;
		}
	}

	.share {
		padding: 0;
		margin: 0;
		background-color: transparent;

		&::after {
			display: none;
		}
	}

	.content {
		padding: 20rpx 0 100rpx;
	}

	.bottom-tabbar {
		position: fixed;
		bottom: 0;
		z-index: 9;
	}

	.pop-bg {
		width: 606rpx;
		height: 403rpx;
		border-radius: 8px;
		opacity: 1;
		background: #FFFFFF;
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: normal;
		line-height: 14px;
		letter-spacing: 0px;
		color: #333333;
		padding: 40rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		text-align: center;

		.text {
			margin: 50rpx 0 0;
		}

		.btn {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: auto;
			width: 100%;

			.cancel {
				width: 98px;
				height: 34px;
				border-radius: 102px;
				opacity: 1;

				background: #F7F7F7;

				border: 1px solid #F7F7F7;
				color: #333333;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.confirm {
				width: 98px;
				height: 34px;
				border-radius: 102px;
				opacity: 1;

				background: #FF5866;

				border: 1px solid #FF5866;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.pop-content {
		font-family: PingFang SC;
		font-size: 15px;
		font-weight: normal;
		line-height: 15px;
		// text-align: center;
		letter-spacing: 0px;
		display: flex;
		// align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 30rpx 0 0;

		/* #ifdef MP-WEIXIN */
		//padding-bottom: 25px;
		/* #endif */
		/* #ifndef MP_WEIXIN */
		//padding-bottom: 50px;
		/* #endif */
		.con {
			margin: 20rpx 30rpx;
		}

		.con1 {
			display: flex;
			align-items: center;
			margin: 20rpx 0;
			font-family: PingFang SC;
			font-size: 14px;
			font-weight: normal;
			line-height: 15px;
			letter-spacing: 0px;

			color: #333333;

			.con1-2 {
				margin-right: 20rpx;
				display: flex;
				align-items: center;
			}

			image {
				width: 16px;
				height: 16px;
				margin-right: 20rpx;
			}
		}

		.con2 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-family: PingFang SC;
			font-size: 28rpx;
			font-weight: normal;
			line-height: 30rpx;
			letter-spacing: 0px;
			margin: 20rpx 10rpx;
			color: #333333;

			.input {
				width: 81.19%;
				height: 34px;
				border-radius: 8px;
				opacity: 1;

				background: #F6F6F6;

			}
		}

		.con3 {
			font-family: PingFang SC;
			font-size: 14px;
			font-weight: normal;
			line-height: 15px;
			letter-spacing: 0px;
			margin: 20rpx 10rpx;
			color: #333333;

			.con3-text {
				font-family: PingFang SC;
				font-size: 14px;
				font-weight: normal;
				line-height: 15px;
				letter-spacing: 0px;
				color: #FF7681;
			}

			.con3-input {
				margin-top: 20rpx;
			}
		}

		.title {
			text-align: center;
		}

		.pop-bottom {
			width: 100%;
			height: 59px;
			opacity: 1;
			background: #FFFFFF;
			box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
			font-family: PingFang SC;
			font-size: 15px;
			font-weight: normal;
			line-height: 15px;
			text-align: center;
			letter-spacing: 0px;
			display: flex;
			align-items: center;
			justify-content: center;
			// position: absolute;
			bottom: 0;

			.btn1 {
				width: 133px;
				height: 40px;
				border-radius: 102px;
				opacity: 1;
				background: #F7F7F7;
				border: 1px solid #F7F7F7;
				color: #333333;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 40rpx;
			}

			.btn2 {
				width: 133px;
				height: 40px;
				border-radius: 102px;
				opacity: 1;
				background: #FF5866;
				border: 1px solid #FF5866;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 40rpx;
			}

			.btn {
				width: 80%;
				height: 70rpx;
				border-radius: 102px;
				background: #FF5866;
				border: 1px solid #FF5866;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.text {
			width: 100%;
			color: #000000;
			line-height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.to-btn {
		position: fixed;
		z-index: 95;
		right: 10rpx;
		top: 700rpx;

		image {
			position: relative;
			z-index: 95;
			width: 50px;
			height: 50px;
		}
	}

	.dynamicList {
		margin-bottom: 20rpx;
		background-color: #ffffff;
		width: 100%;
		height: fit-content;
		display: flex;
		z-index: 2;
		flex-direction: row;
		padding: 20rpx;

		.left {
			margin-top: 20rpx;
			margin-right: 20rpx;

			image {
				width: 44px;
				height: 44px;
				border-radius: 50%;
			}
		}

		.right {
			z-index: 1;
			width: 0;
			flex: 1;
			padding-right: 15rpx;

			.r1 {
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				width: 100%;

				.name {
					// min-width: 72px;
					max-width: 250rpx;
					font-size: 18px;
					font-weight: 500;
					line-height: 17px;
					letter-spacing: 0px;
					color: #000000;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					-o-text-overflow: ellipsis;
				}

				.tuijian {
					width: 79px;
					height: 24px;
					border-radius: 33px;
					opacity: 1;

					background: #FF7681;
					font-size: 12px;
					font-weight: normal;
					line-height: 18px;
					letter-spacing: 0px;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #FFFFFF;
					margin-left: 10rpx;
				}

				.fenlei {
					min-width: 72px;
					max-width: 100px;
					height: 24px;
					border-radius: 33px;
					opacity: 1;

					background: rgba(251, 182, 187, 0.14);
					font-size: 12px;
					font-weight: normal;
					line-height: 18px;
					letter-spacing: 0px;
					color: #F7635C;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0 10rpx;

					.fenlei1 {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						-o-text-overflow: ellipsis;
					}
				}
			}

			.r2 {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-weight: normal;
				line-height: 24rpx;
				color: #999999;
				width: 100%;

				.r2-con {
					margin-left: 20rpx;
				}

				.r2-time {
					margin-right: 40rpx;
					position: absolute;
					right: 0;
				}

				.r2-sex1 {
					display: flex;
					width: 42px;
					height: 16px;
					border-radius: 88px;
					opacity: 1;
					background: rgba(116, 220, 254, 0.2);

					font-size: 11px;
					font-weight: 500;
					line-height: 15px;
					display: flex;
					align-items: center;
					justify-content: center;
					letter-spacing: 0px;
					color: #2BC1F1;

				}

				.r2-sex2 {
					display: flex;
					width: 42px;
					height: 16px;
					border-radius: 88px;
					opacity: 1;

					background: rgba(253, 168, 175, 0.2);

					font-size: 11px;
					font-weight: 500;
					line-height: 15px;
					display: flex;
					align-items: center;
					justify-content: center;
					letter-spacing: 0px;
					color: #FDA8AF;

				}
			}

			.r3 {
				display: flex;

				.tabs {
					display: flex;
					position: relative;
					flex-wrap: wrap;
					margin-top: 15rpx;
					padding: 0;
					height: 44rpx;
					overflow: hidden;

					.tabs-item {
						font-size: 24rpx;
						font-weight: normal;
						line-height: 24rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #FFFFFF;
						width: 118rpx;
						height: 44rpx;
						border-radius: 44rpx;
						opacity: 1;
						background: #FF6C91;
						margin-right: 15rpx;
						margin-bottom: 10rpx;
					}
				}
			}

			.r4 {
				// display: flex;
				font-size: 28rpx;
				font-weight: normal;
				line-height: 32rpx;
				color: #333333;
				width: 590rpx;
				margin-top: 15rpx;

				.expand-btn {
					font-size: 26rpx;
					font-weight: normal;
					line-height: 30rpx;
					color: #FF7883;
				}
			}

			.r5 {
				display: flex;
				width: 586rpx;
				flex-wrap: wrap;
				margin-top: 15rpx;

				.image {
					display: flex;
					margin-right: 10rpx;
					margin-bottom: 10rpx;
					position: relative;

					image {
						width: 172rpx;
						height: 172rpx;
					}

					video {
						width: 172rpx;
						height: 172rpx;
					}

					.play_icon {
						width: 32rpx;
						height: 36rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						z-index: 1;
					}
				}

			}

			.r6 {
				display: flex;
				align-items: center;
				width: 586rpx;
				height: 52rpx;
				border-radius: 8rpx;
				opacity: 1;

				background: rgba(0, 188, 86, 0.05);
				font-size: 22rpx;
				font-weight: normal;
				line-height: 24rpx;
				margin: 10rpx 0;
				color: #00BC56;

				image {
					width: 26rpx;
					height: 26rpx;
					margin: 0 20rpx;
				}
			}

			.r7 {
				display: flex;
				align-items: center;
				width: 586rpx;
				height: 52rpx;
				border-radius: 8rpx;
				opacity: 1;

				background: rgba(255, 119, 43, 0.05);
				font-size: 24rpx;
				font-weight: normal;
				line-height: 24rpx;
				margin: 10rpx 0;
				color: #FF772B;

				image {
					width: 26rpx;
					height: 26rpx;
					margin: 0 20rpx;
				}
			}

			.r8 {
				font-size: 26rpx;
				font-weight: 500;
				line-height: 26rpx;
				letter-spacing: 0px;
				color: #333333;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 20rpx 0;
				width: 586rpx;

				.image {
					width: 100rpx;
					display: flex;
					align-items: center;
				}

				image {
					width: 32rpx;
					height: 32rpx;

					margin-right: 10rpx;
				}
			}

			.r9 {
				display: flex;
				align-items: center;
				width: 586rpx;
				height: 52rpx;
				border-radius: 8rpx;
				opacity: 1;

				font-size: 24rpx;
				font-weight: normal;
				line-height: 24rpx;
				letter-spacing: 0px;
				margin: 10rpx 0;
				color: #666666;

				image {
					width: 26rpx;
					height: 26rpx;
					margin: 0 20rpx;
					flex-shrink: 0;
				}
			}

			.r10 {
				display: flex;
				align-items: center;
				justify-content: center;

				font-family: PingFang SC;
				font-size: 24rpx;
				font-weight: normal;
				line-height: 24rpx;

				font-variation-settings: "opsz" auto;
				color: #666666;
				padding: 10rpx;
			}

		}
	}

	.tabs {
		background-color: #ffffff;
		padding: 10rpx 0;

		.tabs-1 {
			display: flex;
			height: 50rpx;
			margin: 20rpx;
		}

		.tabs-2 {
			width: 100rpx;
			justify-content: center;
			align-items: center;
			display: flex;
			margin-right: 30rpx;
			font-family: PingFang SC;
			font-size: 15px;
			font-weight: normal;
			line-height: 15px;
			letter-spacing: 0px;
			color: #333333;
		}

		.tabs-2.active {
			position: relative;
			line-height: 15px;
			transition: all 0.3s ease;
			border-radius: 22px;
			opacity: 1;
			background: #FF7883;
			font-family: PingFang SC;
			font-size: 13px;
			font-weight: normal;
			letter-spacing: 0px;
			font-variation-settings: "opsz" auto;
			color: #FFFFFF;
			padding: 0 10rpx;
		}
	}
</style>